'use client';

import Link from "next/link";
import { usePathname } from "next/navigation";
import { 
  HomeIcon, 
  GlobeAltIcon, 
  Squares2X2Icon, 
  DocumentTextIcon 
} from "@heroicons/react/24/outline";

interface BottomNavBarProps {
  className?: string;
}

export default function BottomNavBar({ className = "" }: BottomNavBarProps) {
  const pathname = usePathname();

  const navItems = [
    { 
      key: "home", 
      label: "首页", 
      icon: HomeIcon, 
      href: "/" 
    },
    { 
      key: "discover", 
      label: "发现", 
      icon: GlobeAltIcon, 
      href: "/discover" 
    },
    { 
      key: "products", 
      label: "产品", 
      icon: Squares2X2Icon, 
      href: "/products" 
    },
    { 
      key: "cases", 
      label: "攻略", 
      icon: DocumentTextIcon, 
      href: "/cases" 
    }
  ];

  const isActive = (href: string) => {
    if (href === "/") {
      return pathname === "/";
    }
    return pathname.startsWith(href);
  };

  return (
    <nav className={`fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-50 md:hidden ${className}`}>
      <div className="flex items-center justify-around py-1">
        {navItems.map((item) => {
          const active = isActive(item.href);
          const IconComponent = item.icon;
          
          return (
            <Link
              key={item.key}
              href={item.href}
              className={`flex flex-col items-center justify-center py-2 px-2 min-w-0 flex-1 transition-all duration-200 ${
                active 
                  ? "text-blue-600" 
                  : "text-gray-500 hover:text-gray-700"
              }`}
            >
              <IconComponent className={`w-6 h-6 mb-1 ${active ? 'text-blue-600' : 'text-gray-500'}`} />
              <span className={`text-sm font-medium truncate ${active ? 'text-blue-600' : 'text-gray-500'}`}>
                {item.label}
              </span>
            </Link>
          );
        })}
      </div>
    </nav>
  );
}
